<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标控制图片滚动翻页 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/gridNavigation.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.gridnav.js"></script>
<script type="text/javascript">
$(function() {
	$('#tj_container').gridnav();
});
</script>
</head>
<body>

<p class="codrops-demos">
	<a href="index.html">Demo 1</a>
	<a href="index2.html">Demo 2</a>
	<a href="index3.html">Demo 3</a>
	<a href="index4.html">Demo 4</a>
	<a href="index5.html">Demo 5</a>
	<a href="index6.html">Demo 6</a>
	<a href="index7.html">Demo 7</a>
	<a href="index8.html">Demo 8</a>
	<a href="index9.html">Demo 9</a>
	<a class="current-demo" href="index10.html">Demo 10</a>
</p>

<div id="tj_container" class="tj_container">
	<div class="tj_nav">
		<span id="tj_prev" class="tj_prev">Previous</span>
		<span id="tj_next" class="tj_next">Next</span>
	</div>
	<div class="tj_wrapper">
		<ul class="tj_gallery">
			<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
			<li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
			<li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
			<li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
			<li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
			<li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
			<li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
			<li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
			<li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
			<li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
			<li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
			<li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
			<li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
			<li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
			<li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
			<li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
			<li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
			<li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
			<li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
			<li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
		</ul>
	</div>
</div>

<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>